<template>
  <view class="register-container">
    <view class="logo-container">
      <image :src="Config.API_HOST+'/imgs/lanqiao-logo.svg'" mode=""></image>
    </view>
    <view class="input-section">
      <input
        type="text"
        placeholder="用户名"
        class="username-input"
		v-model="username"
      />
      <input
        type="password"
        placeholder="请输入密码"
        class="password-input"
		v-model="password"
      />
      <input
        type="password"
        placeholder="请再次输入密码"
        class="confirm-password-input"
		v-model="avatarInfo"
      />
    </view>
    <button class="register-button" @click="register">注册</button>
    <view class="login-link">
      <text @click="gologin">已有账号去登录</text>
    </view>
  </view>
</template>

<script setup>
import Config from "@/config.js";
import { ref } from "vue";
const username = ref("");
const password = ref("");
const avatarInfo = ref("");

const register = () => {
  // 用户名不能为空验证
  if (!username.value.trim()) {
    uni.showToast({
      title: '用户名不能为空',
      icon: "error"
    });
    return;
  }

  if (!password.value.trim()) {
    uni.showToast({
      title: '密码不能为空',
      icon: "error"
    });
    return;
  }
  // 密码长度为6到9位验证
  const passwordRegex = /^.{6,9}$/;
  if (!passwordRegex.test(password.value)) {
    uni.showToast({
      title: '密码需为6到9位',
      icon: "error"
    });
    return;
  }
  if (password.value!=avatarInfo.value) {
    uni.showToast({
      title: '两次密码不同',
      icon: "error"
    });
    return;
  }
  // 检查用户名是否重复
  uni.request({
    url: `${Config.API_HOST}/checkUsername?username=${username.value}`,
    method: "GET",
    success: (res) => {
      if (res.data.exists) {
        uni.showToast({
          title: '用户名已存在，请重新输入',
          icon: "error"
        });
        return;
      }
      // 用户名不重复，进行注册操作
      uni.request({
        url: `${Config.API_HOST}/login`,
        method: "POST",
        data: JSON.stringify({
          username: username.value,
          password: password.value,
		   avatar: "https://img2.baidu.com/it/u=533974209,1260837988&fm=253&fmt=auto&app=138&f=PNG?w=500&h=501",
          token: username.value
        }),
        success: (res) => {
          uni.showToast({
            title: "注册成功",
          });
         setTimeout(() => {
                uni.redirectTo({
                    url: "/pages/login/index"
                });
            }, 1000);
        }
      });
    },
    fail: (err) => {
      console.error('检查用户名是否重复失败', err);
    }
  });
};

const gologin = () => {
  uni.redirectTo({
    url: "/pages/login/index"
  });
};
</script>

<style scoped>
.register-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: #f9f9f9;
  padding: 20px;
}

.logo-container {
  margin-bottom: 40px;
}
.logo-container image{
  width: 150px;
  height: 150px;
}
.logo {
  width: 80px;
  height: 80px;
}

.input-section {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 350px;
  margin-bottom: 20px;
}

.username-input,
.password-input,
.confirm-password-input {
  width: 100%;
  padding: 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 16px;
  margin-bottom: 10px;
}

.register-button {
  width: 100%;
  max-width: 350px;
  padding: 16px;
  border: none;
  border-radius: 8px;
  background-color: #007AFF;
  color: white;
  font-size: 18px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
}

.register-button:hover {
  background-color: #005EA6;
}

.login-link {
  margin-top: 10px;
}

.login-link text {
  color: #666;
  text-decoration: none;
  cursor: pointer;
}
</style>